<template>
  <div class="agri-center">
    <div class="top" style="height: 450px">
      <div class="title">
        <img
          src="../../../assets/img/grovernance/moeny.png"
          height="20px"
          alt=""
        />
        <span>农产品种植情况</span>
      </div>
      <div class="top-content">
        <div class="table-title">
          <div
            style="
              width: 0;
              height: 0;
              border-top: 5px solid transparent;
              border-bottom: 5px solid transparent;
              border-left: 10px solid;
              margin-right: 5px;
            "
          ></div>
          <span style="color: #bdffff">农产品种植情况</span>
        </div>
        <div class="table">
          <table class="table-main">
            <tr style="color: white; font-size: 18px; font-weight: bold">
              <td>农作物</td>
              <td>占地面积</td>
              <td>承包商</td>
            </tr>
            <tr>
              <td>南瓜</td>
              <td>30亩</td>
              <td>运联优企</td>
            </tr>
            <tr>
              <td>南瓜</td>
              <td>30亩</td>
              <td>运联优企</td>
            </tr>
            <tr>
              <td>南瓜</td>
              <td>30亩</td>
              <td>运联优企</td>
            </tr>
            <tr>
              <td>南瓜</td>
              <td>30亩</td>
              <td>运联优企</td>
            </tr>
            <tr>
              <td>南瓜</td>
              <td>30亩</td>
              <td>运联优企</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="bottom">
      <Echart :options="option" height="480px"></Echart>
    </div>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
export default {
  name: "agri-center",
  components: { Echart },
  data() {
    return {
      option: {
        title:{
            text: '农产品产量情况',
            textStyle: {
              color: '#fff',
            },
            top:10
          },
        xAxis: {
          
          type: "category",
          data: ["南瓜", "西瓜", "水稻", "番茄", "黄瓜"],
          // nameTextStyle: {
          //   fontSize: 15,
          // },
          axisLabel: {
            fontSize: 15,
          }
        },
        tooltip: {
          show: true,
        },
        grid: {
          top: "20%",
          x: 35,
          y: 65,
          x2: 10,
          y2: 30,
        },
        yAxis: {
          type: "value",
          name: "产量(吨)",
          nameTextStyle: {
            fontSize: 15,
            color:'#fff'
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.agri-center {
  flex: 1;
}
.bottom {
  height: 500px;
}
.title {
  height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
  background: linear-gradient(90deg, #288ad6 0%, #09306c 100%);
  span {
    margin-left: 10px;
    font-size: 22px;
    color: #dcd58a;
    font-weight: bold;
  }
}
.table-main {
  width: 100%;
  height: 370px;
  color: #bdffff;
  text-align: center;
  border-collapse: collapse;
  tr {
    background-color: #041f41;
  }
  tr:nth-child(even) {
    background-color: #071b5a;
  }
  td {
    border-left: 2px solid #023a64;
  }
}
.top-content {
  margin-top: 10px;
}
.table-title {
  display: flex;
  width: 200px;
  align-items: center;
  margin-bottom: 5px;
  padding-left: 10px;
}

tr:nth-child(1) td {
  border: 0;
  width: 30%;
}
.agri-center {
  flex: 1;
}
</style>
